<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #wrapper {/*方块盒子*/
      width: 480px;
      margin: 0 auto;
      overflow: hidden;
      padding-bottom: 30px;
      background-color: #ccc;
    }
    .item {/*每一个小方块*/
      float: left;
      margin-left: 30px;
      width: 120px;
      height: 120px;
      border-radius: 10px;
      margin-top: 30px;
      background-color: rgba(148, 148, 4, 0.692);
    }
    .btn {/*按钮*/
      width: 480px;
      height: 80px;
      color: rgb(192, 192, 13);
      border: 2px solid rgb(148, 148, 4, 0.692);
      border-radius: 8px;
      margin: 0 auto;
      margin-top: 10px;
      display: block;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <button class="btn">Start</button>
  <button class="btn">Stop</button>
</body>
</html>
<script>
  // 按钮进入改变背景色
  var btn = document.getElementsByClassName('btn')  //返回一个类数组
  for (let i=0; i < btn.length; i++) {
    btn[i].addEventListener('mouseenter', function(){
      this.style.backgroundColor = 'rgb(192, 192, 13)'
      this.style.color = '#fff'
    })
    btn[i].addEventListener('mouseleave', function(){
      this.style.backgroundColor = ''
      this.style.color = ''
    })
  }
  //开始按钮添加事件
  var boxList = document.getElementsByClassName('item') //所有方块   类数组
  var clock //定时器
  var arr = [0,1,2,3,4,5,6,7,8,]
  var randomList
  var colorList
  btn[0].addEventListener('click', function(){
    if (clock) {
        clearInterval(clock)
    }
    clock = setInterval(function(){
      for (let j=0; j<boxList.length; j++) {
        boxList[j].style.backgroundColor = ''
      }
      //获得三个随机数
      randomList = getRandomEle(arr, 3)
      //获得三个随机颜色
      colorList = getRandomColor(3)
      var index
      for (let i=0; i<3; i++) {
        // console.log(randomList[i] + '随机数')
        // console.log(colorList + '颜色')
        index = randomList[i]
        console.log(colorList[i])
        boxList[index].style.backgroundColor = '#' + colorList[i]
      }
    },1000)
  })

  //停止按钮事件
  btn[1].addEventListener('click', function(){
    clearInterval(clock)
    for (let j=0; j<boxList.length; j++) {
        boxList[j].style.backgroundColor = ''
      }
  })
  
  
  //生成任意颜色
  function getRandomColor (num) {
    var colorStr=""
  //字符串的每一字符的范围
    var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
    var colorArr = []
    for (var i=0; i<num; i++) {
      for(var j=0;j<6;j++){
    //15是范围上限，0是范围下限，两个函数保证产生出来的随机数是整数
        colorStr += randomArr[Math.ceil(Math.random()*(15-0)+0)];
        colorArr[i] = colorStr
      }
      colorStr=""
    }
    return colorArr
  }
  // 从一个数组中拿出任意个元素
  function getRandomEle (arr, num) {
    //2.产生随机数并当做索引取出随机值，在临时数组中删除该值   
    //3.将取出的值放入返回数组
    var temArr = [] //临时数组
    var reArr = [] //返回的数组
    //1.把传入数组放入新数组
    for (let index in arr) {
      temArr.push(arr[index]); 
    }
    for (let i=0; i<num; i++) {
      if (temArr.length > 0) {
        let index = Math.floor(Math.random() * temArr.length);
        reArr.push(temArr[index])
        temArr.splice(index, 1)
      } else {
        console.log('error')
        return
      }
    }
    return reArr
  }

</script>